<template>
  <div class="container">
      <fieldset class="todo">
      <legend>TODOLIST</legend>
      <div class="inner_container">
          <div class="top">
              <img src="../assets/img/todologo.webp" alt="" style="width:50px">
              <span>TODOLIST</span>
          </div>
          <div class="note">
              ~卿卿日常真好看~
          </div>
          <div class="recode">
              <input type="text" placeholder="在此添加今日事项哦" ref="ipt">
              <span class="btn" @click="addFn">记录</span><br>            
          </div>
          <ul class="list">
              <li v-for="(item,index) in todoList" :key="index" >
                  <input type="checkbox" ref="chose" @click="chosenFn(index)">&nbsp;&nbsp;&nbsp;
                  {{item}}
                  <button @click="delFn(index)">❌</button>
              </li>
          </ul>
          <div class="footer">
              <button>全部</button><span class="total">{{totalItem}}&nbsp;<span style="color:black">条事项</span></span>
              <button>已完成：<span>{{achievedItem}}</span></button>
              <button>未完成：<span>{{todoItem}}</span></button>
          </div>
      </div>
      </fieldset>
  </div>

</template>
<script setup>
import { ref,computed,toRefs, onMounted } from 'vue';
//  删除项
  let todoList = ref(['追剧','追剧','追剧','睡觉'])

  function delFn(index){
      console.log(todoList);
      todoList.value.splice(index,1)
  }
  
  //添加选项
  let ipt = ref()
  function addFn(){
      
          todoList.value.push(ipt.value.value)
      
      
  }


</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
ul{
  list-style: none;
}
html,body{
  width :100%;
  height: 100%;
  margin: 8px;
}
.container{
  position: fixed;
  margin-left: -8px;
  margin-top: -8px;
  width :100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(90deg,#e0b9da,#c2b57b);
  background-repeat: no-repeat;

} 
.todo{
  width: 400px;
  margin: 0 auto;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
} 
.inner_container{
  width: 380px;
  background-color: rgb(255, 255, 255);
  border-radius: 10px;
  margin-bottom: 10px;
}
.top{
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 height: 100px;
 width: 100%;
 /* background-color: darkblue; */
 display: flex;
 justify-content: center;
 align-items: center;
 color: #000;
 font-size: 24px;
 font-weight: bold;
}
.top span{
  margin-left: 10px;
}
.note{
 height: 30px;
 width: 100%;
 /* background-color: rgb(96, 96, 243); */
 display: flex;
 justify-content: center;
 align-items: center;
 color: rgb(125, 74, 81);
}
.recode{
  width: 100%;
  height: 80px;
  /* background-color: darkorchid; */
  display: flex;
  justify-content: center;
  align-items: center;
}
.recode input{
  outline: none;
  height: 30px;
  width: 250px;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  border-style: dashed;
  border-color: #18aca5;
  font-size: 14px;
}
.btn{
  width: 50px;
  color: #000;
  line-height: 28px;
  border: 2px solid cyan;
  text-align: center;
  margin-left: 5px;
  cursor: pointer;
}
.list{
  width: 100%;
}
.list li{
  display: flex;
  align-items: center;
  box-sizing: border-box;
  line-height: 30px;
  padding-left: 20px;
  height: 30px;
  margin-bottom: 5px;
  /* background-color: darkgreen; */
  color: #000;
  position: relative;
}
.list li button{
  border: none;
  position: absolute;
  right: 30px;
  cursor: pointer;
}
.footer{
  box-sizing: border-box;
  padding-left: 20px;
  width: 100%;
  height: 50px;
  /* background-color: darkmagenta; */
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom-left-radius: 10px;
 border-bottom-right-radius: 10px;
}
.total{
  margin-left: -30px;
  color: red;
}
.footer button span{
  color: red;
}
</style>